<template>
  <div class="mian" id="bodyBox" :mapLi="mapLi">

    <!--<div class="maps"></div>-->
    <div class="main" id="map" >

    </div>
  </div>
</template>
<style scoped>
   #map{height:480px;width: 100%;position: absolute;top: 0px;left: 0px;z-index: 10}
   .maps{width: 20%;height: 200px;position: absolute;top: 120px;left:40%;z-index:11;}
   #bodyBox{width:100%;height: 480px;position: relative}
.leftBox{position: relative;height: 1px;}
.iconText{margin-left: 10px}
   .center{width: 273px;height: 480px;box-sizing:border-box;background-color: #21272c;position: absolute;right: 0px;top: 0px;z-index: 11;padding: 40px 20px}
   .center{padding-top:25px }
   .center p{color: #fff;text-align: left;line-height: 30px ;font-size: 12px}
  .center .text{font-size: 18px;font-weight: bold;color: #fff}
  .center .icon{margin-right: 5px}
   .icon img{position: relative;top: 5px}
   .imgBoxs{width: 184px;height: 125px;overflow: hidden;background-color: #0062a2;margin-bottom: 15px}
   .imgBoxs img{max-width: 184px;min-height: 125px}
</style>
<script>
  import setPublc from '@/components/public/set.vue'
  import HeaderPublc from '@/components/public/herderIndex.vue'
  import Public from '@/vuex/public'
  import cent from '@/components/lanwan/pager/searchChart.vue'
  import myfooter from '@/components/public/footer.vue'
  import {mapState, mapActions} from 'vuex'
  import jsonData from '../../../../static/local'
  export default {
    name: 'my-adminChart',
    beforeCreate () {
      // this.$store.commit('transportListTo', null)
      this.$store.commit('updateDetail',null)
    },
    data () {

      return {
        input:'',
        list2: [],
        mapType:'google',
        chart:{},
        lastList:'',
        locations:[],
        // 地图参数
        map: null,
        platform: null,
        behavior: null,
        defaultLayers: null,
        ui: null,
        index:0,
        points:[],
        polylineList:[],
        infowindow:[],
        bubble:[[]],
        in:0,
        length:0,
      }
    },
    methods: {
      ...mapActions({
        // delUser: 'delUserList',
        // checkID: 'checkId',
        // mapListpost: 'mapListFn'
      }),
      // 查询
      /**
       * here地图
       */
      // 地图渲染
      mapFn (map, parm) {
        if(this.mapType=='google'){
          var point
          if (parm) {
            point =  new google.maps.LatLng(parm.lat, parm.lng);
          } else {
            point = new google.maps.LatLng(39.915,116.404);
          }
          var mapProp = {
            center:point,
            zoom:3,
            mapTypeId:google.maps.MapTypeId.ROADMAP
          };
         this.map = new google.maps.Map(document.getElementById("map"), mapProp);
        }
      },
      // 链接地图服务器 here地图

      /**
       * 谷歌地图
       */
      //加载谷歌地图静态文件
      googleMap(){
        // var script = document.createElement("script");
        // script.src = "http://maps.google.cn/maps/api/js?key=AIzaSyBXa5IGr11xML0OumozehXsvEJ9Y7tTV4Q&language=zh-CN&sensor=TRUE_OR_FALSE";
        // document.body.appendChild(script);
        var that=this;
        that.googleMapService()
      },
      //创建地图实例
      googleMapService () {
       this.mapFn()
        // var point = new BMap.Point(116.404, 39.915);
      },
      /** 绘画路径
       * Creates a H.map.Polyline from the shape of the route and adds it to the map.
       * @param {Object} route A route as received from the H.service.RoutingService
       */
      addRouteShapeToMap (route,a) {
          var myTrip=[]
          for(let i in route){
            // var x = new google.maps.Projection(route[i].lat,route[i].lng)
            // consoel.log(x,'x')
            var p = new google.maps.LatLng(route[i].latitude,route[i].longitude);
            myTrip.push(p)
          }
          var flightPath=new google.maps.Polyline({
            path:myTrip,
            strokeColor:"#0000FF",
            strokeOpacity:0.8,
            strokeWeight:6
          });
          flightPath.setMap(this.map);
          this.addManueversToMap(route,a)
      },
      /** 创建地图点maneuver
       * Creates a series of H.map.Marker points from the route and adds them to the map.
       * @param {Object} route  A route as received from the H.service.RoutingService
       */
      addManueversToMap (route,a) {
          for( let i in route){
            var myIcon  = {
              url: 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png',
              // This marker is 20 pixels wide by 32 pixels high.
              //size: new google.maps.Size(20, 32),
              // The origin for this image is (0, 0).
              origin: new google.maps.Point(0, 0),
              // The anchor for this image is the base of the flagpole at (0, 32).
              anchor: new google.maps.Point(10, 20)
            };
            var myCenter=  new google.maps.LatLng(route[i].latitude,route[i].longitude);
            if(i==0){
              myIcon.url = "../../../static/img/icon/stra.png"
              myIcon.anchor= new google.maps.Point(5, 5)
            }else {
              if(i == route.length - 1 && i != 0){
                myIcon.url = "../../../static/img/icon/end.png"
              }else {
                myIcon.url = "../../../static/img/icon/deft.png"
                myIcon.anchor= new google.maps.Point(8, 8)
              }
            }
            var marker=new google.maps.Marker({
              position:myCenter,
              icon:myIcon
            });
            marker.setMap(this.map);
            // var t = this.openBubble(route[i],i,a)
            // if(t){
            //   t.open(this.map,marker)
            // }
            // var that = this
          //   google.maps.event.addListener(marker,'click',function() {
          //     var marker = new google.maps.LatLng(route[i].latitude,route[i].longitude);
          //     var s = that.bubble[a][i]
          //     s.setPosition(marker);
          //     s.open(that.map)
          //   });
          }

        a ++

        this.searchDetailFn(a)
      },
      // 标注弹框
      openBubble (position,i,a) {
          var content = '<p style="font-size: 14px;text-align: left;color:#000">' + position.location; + '</p>';
          if(!this.bubble[a]){
            this.bubble.push([])
          }
          if(this.bubble[a][i]){
            return ''
          }else {
            if(this.bubble[a][i]){

              this.bubble[a][i].setCellContent(content)
            }else {

              this.bubble[a][i]= new google.maps.InfoWindow({
                content:content,
              });
            }
            return  this.bubble[a][i]
          }
       this.bubble // 有无弹框
      },
      // 解析地图数据
      // 列表解析
      searchDetailFn(a){
         if(a>this.length){
           return
         }else {
           var data = JSON.parse(this.lastList)
           this.addRouteShapeToMap(data[a],a)
         }
      },
      openSuccess (text) {
        this.$message({
          message: text,
          type: 'success'
        })
      },
      // 排序算法
      compare:function(property,x){
        return function(a,b){
          var value2 = a[property];
          var value1 = b[property];
          return x?value1 - value2:value2 - value1;
        }
      },
      openError (text) {
        this.$message.error(text)
      },
      // 启动地图
      sev(){
        if(this.mapType=='google'){
          this.googleMap()
        }
      }
    },
    computed: {
      languageData: function () {
        var parm = this.language
        if (parm) {
          if (parm.check == 'Chinese') {
            parm = parm.Chinese
          }
          if (parm.check == 'English') {
            parm = parm.English
//            this.formConfig.labelWidth = '200px'
//            dom.style = 'width:620px'
          }
          // 替换 其他交互数据
//          this.updateDate(parm)
        }
        return parm
      },
      // 地图列表数据
      mapLi: function () {
        var parm = this.mapList
        if (parm) {
          var str = JSON.stringify(parm)
          if(str!= this.lastList){
            this.lastList = str
            this.sev()
            this.length = parm.length
            this.searchDetailFn(0)
          }
        }
        return 1
      },
      ...mapState([
        'mapList',
        'language',
      ])
    },
    mounted () {
      this.sev()
    },
    components: {
      HeaderPublc: HeaderPublc,
      cent: cent,
      myfooter:myfooter
    }
  }
</script>

